<!--
  Generated template for the ActivatePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

</ion-header>

<ion-content padding class="activate">
  <br/>
  <br/>
  <img class="logo" src="assets/img/posify_r.png" />
  <form [formGroup]="authForm" (ngSubmit)="submitForm(authForm.value)">
    <ion-item>
      <ion-label floating>{{ 'APP_NAME' | translate }}</ion-label>
      <ion-input type="text" value="" [formControl]="authForm.controls['username']" [ngClass]="{'error-border':!authForm.controls['username'].valid}"></ion-input>
    </ion-item><br/>
    <div class="error-box" *ngIf="authForm.controls['username'].hasError('required') && authForm.controls['username'].touched">* App Name is required!</div>
    <div class="error-box" *ngIf="authForm.controls['username'].hasError('minlength') && authForm.controls['username'].touched">* Minimum App Name length is 5!</div>
    <div class="error-box" *ngIf="authForm.controls['username'].hasError('maxlength') && authForm.controls['username'].touched">* Maximum App Name length is 10!</div>
    <ion-item>
      <ion-label floating>{{ 'PASSCODE' | translate }}</ion-label>
      <ion-input type="text" value="" [formControl]="authForm.controls['password']"></ion-input>
    </ion-item><br/>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('required') && authForm.controls['password'].touched">* Username is required!</div>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('minlength') && authForm.controls['password'].touched">* Minimum username length is 5!</div>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('checkFirstCharacterValidatorOutput') && authForm.controls['password'].touched">* Password cant't start with number!</div><br/>
    <br/>
    <button type="submit" ion-button full [disabled]="!authForm.valid">{{ 'ACTIVATE' | translate }}</button>
  </form>
</ion-content>